<div class="row card w-90 bg-light">
  <form id="dependency-query-form" class="form-inline m-2" role="form">
    <div id="start-ts" class="form-group mr-3">
      <label for="timeStamp" data-i18n="dep.stime">Start time</label>
      <input class="ml-1 form-control input-sm date-input" type="text">
      <input class="ml-1 form-control input-sm time-input" type="text">
      <input class="timestamp-value" id="startTs" name="startTs" type="hidden" value="">
    </div>

    <div id="end-ts" class="form-group mr-3">
      <label for="timeStamp" data-i18n="dep.etime">End time</label>
      <input class="ml-1 form-control input-sm date-input" type="text">
      <input class="ml-1 form-control input-sm time-input" type="text">
      <input class="timestamp-value" id="endTs" name="endTs" type="hidden" value="">
    </div>

    <button type="submit" class="ml-1 btn btn-primary btn-sm" data-i18n="dep.analyze">Analyze Dependencies</button>
  </form>
</div>

<div id="service-data-modal-container">
  <div class="modal fade" id="serviceModal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class='modal-dialog modal-lg'>
      <div class="modal-content">
        <div class="modal-header bg-light">
          <h3 class="modal-title">
            <span id="serviceModalTitle">[title]</span>
          </h3>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container">
            <div class="row">
              <div class="col-sm-6">
                <h4 data-i18n="dep.usedby">Used by</h4>
                <ul id="serviceUsedByList"></ul>
              </div>
              <div class="col-sm-6">
                <h4 data-i18n="dep.uses">Uses</h4>
                <ul id="serviceUsesList"></ul>
              </div>
            </div>
          </div>
        </div>
      </div>  
    </div>
  </div>

  <div class="modal" id="dependencyModal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header bg-light">
          <h3 class="modal-title row">
            <div id="dependencyModalParent" class="ml-4 mr-4">[parent]</div>
            <div class="mr-4"><span class="fas fa-arrow-right"></span></div>
            <div class="mr-4" id="dependencyModalChild">[child]</div>
          </h3>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <table class="table table-striped table-sm table-bordered">
            <thead>
            <tr>
              <th>Key</th>
              <th>Value</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Number of calls</td>
              <td id="dependencyCallCount">?</td>
            </tr>
            <tr>
              <td>Number of errors</td>
              <td id="dependencyErrorCount">?</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="dependency-container">
  <svg width="100%" height="4000" class="rootSvg">
  </svg>
</div>
